import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import PageContent, {PageContentType} from "../component/PageContent";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {HideAchievementBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {publicGui} from "../../interface/PublicGui";

interface IProp {
    pageContentType: PageContentType;
    getAchFun: (player: PlayerModel) => { [key: string]: number }
}
interface IState {
    achs: {[p: string]: number};

    title: string;
    subTitle: string;
    des: string
    infoVisible: boolean;
    x: number;
    y: number;
}


export default class HideAchievementBar extends HideAchievementBarInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            achs: {},
            visible: false,

            infoVisible: false,
            title: "",
            subTitle: '',
            des: '',
            x: 0,
            y: 0,
        }
    }

    render = () => {
        const allAch = DataRouter.getAchievementDatas();
        let hideAchGuiItemMaps: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.hideAchGuiItemMaps);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);
        const iconSize = { h: 0.05810, w: 0.04375 }
        const onePageNum = 39;
        const unknowBlp = Configer.getResource(ResourceKey.unknowBlp);


        return <PageContent  type={this.props.pageContentType} closeFun={this.close}   key={GuiKeys.pageContentHideAch}  hidden={!this.state.visible} selectItemMap={hideAchGuiItemMaps} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                return allAch.map(
                    (achData, index, array) => {
                        const type = achData?.type;
                        if (type === selectKey && achData && achData.id?.length > 0) {
                            const achId = achData.id;

                            const iconPath = achData?.iconPath;
                            const resourceData = DataRouter.getResourceDataByResourceId(iconPath);
                            let backgroundImage = resourceData?.src;

                            let hidden = false;
                            let mask = disableBlp;
                            let achNum = 0;
                            if (this.state.achs && this.state.achs[achId]) {
                                achNum = this.state.achs[achId];
                            }
                            if (achNum && achNum > 0) {
                                mask = '';
                            } else {
                                backgroundImage = unknowBlp;
                                hidden = true;
                            }
                            return <View   onMouseEnter={(event) => { this.showInfoPage(achData.name, '', achData.descript, event.x + iconSize.w, event.y, hidden) }} onMouseLeave={this.closeInfoPage} key = {`${GuiKeys.hideAchBarItem}|${index}`} style={{ mask, backgroundImage: backgroundImage, width: iconSize.w, height: iconSize.h, marginT: 0.01328, marginL: 0.01000 }}>
                                {/*<View   key={`${GuiKeys.achBarItemNum}|${index}`} style={{ hidden: (achNum === 0) , fontAlign: TextAlign.center, backgroundImage: disableBlp ,fontSize: lvH, width: lvW, height: lvH, float: true, marginT: iconSize.h - lvH - 0.001, marginL:  iconSize.w - lvW }}>{`${achNum}`}</View>*/}
                            </View>
                        }
                        return <View   key = {`${GuiKeys.hideAchBarItem}|${index}`} style={{ hidden: true }}>
                            {/*<View   key={`${GuiKeys.achBarItemNum}|${index}`} style={{ hidden: true }}></View>*/}
                        </View>
                    }
                )
            }
        }></PageContent>
    }

    showInfoPage = (title: string, subTitle: string, des: string, x: number, y: number, disable: boolean) => {
        if (disable) {
            return;
        }
        publicGui.showInfoPage(x, y, title, subTitle, des);
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage()
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        const achs = this.props.getAchFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            visible: true,
            achs,
        })
    }

    close = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.hideAchBar } };
        return syncData;
    }
    getVisible = () => {
        return this.state.visible;
    }
}